<template>
  <div class="container">
    <ul class="line-list">
      <li class="line" v-for="i in 35" :key="i"></li>
    </ul>
    <div class="info-wrap">
      <div class="info-item">
        <div class="info-name">是否推送给服务老师</div>
        <radio-group class="radio-group" @change="changePushToServicer">
          <label class="radio">
            <radio :value="0" color="#44BDF5" :checked="dataForm.pushToServicer === 0"/>
            <span class="label">否</span>
          </label>
          <label class="radio">
            <radio :value="1" color="#44BDF5" :checked="dataForm.pushToServicer === 1"/>
            <span  class="label">是</span>
          </label>
        </radio-group>
      </div>
      <div class="info-item">
        <div class="info-name">是否享受折扣</div>
        <radio-group class="radio-group" @change="changeUseDiscountAmount">
          <label class="radio">
            <radio :value="0" color="#44BDF5" :checked="dataForm.useDiscountAmount === 0"/>
            <span class="label">否</span>
          </label>
          <label class="radio">
            <radio :value="1" color="#44BDF5" :checked="dataForm.useDiscountAmount === 1"/>
            <span  class="label">是</span>
          </label>
        </radio-group>
      </div>
      <div class="info-item">
        <div class="info-name">是否复购</div>
        <radio-group class="radio-group" @change="changeIsRebuy">
          <label class="radio">
            <radio :value="0" color="#44BDF5" :checked="dataForm.isRebuy === 0"/>
            <span class="label">否</span>
          </label>
          <label class="radio">
            <radio :value="1" color="#44BDF5" :checked="dataForm.isRebuy === 1"/>
            <span  class="label">是</span>
          </label>
        </radio-group>
      </div>
      <div class="info-item">
        <div class="info-name">暂不发货</div>
        <radio-group class="radio-group" @change="changeIsDelayShipping">
          <label class="radio">
            <radio :value="0" color="#44BDF5" :checked="dataForm.isDelayShipping === 0"/>
            <span class="label">否</span>
          </label>
          <label class="radio">
            <radio :value="1" color="#44BDF5" :checked="dataForm.isDelayShipping === 1"/>
            <span  class="label">是</span>
          </label>
        </radio-group>
      </div>
      <div class="info-item">
        <div class="info-name">备注信息</div>
        <input class="detail" v-model="dataForm.remark" placeholder="请写下备注的信息~"/>
      </div>
    </div>
    <div class="btn" @click="toSelect">
      确定提交
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        dataForm: {
          pushToServicer: 1,
        }
      }
    },
    async mounted() {
      const provinceResult = await wx.request({
        url: '/region/getTopRegions'
      })
      if (provinceResult.code === 200) {
        this.provinceList = provinceResult.data;
      }
      if(App.addressForm){
        this.dataForm = App.addressForm;
      }
    },
    methods: {
      changePushToServicer(e){
        this.dataForm.pushToServicer = parseInt(e.mp.detail.value)
      },
      changeUseDiscountAmount(e){
        this.dataForm.useDiscountAmount = parseInt(e.mp.detail.value)
      },
      changeIsRebuy(e){
        this.dataForm.isRebuy = parseInt(e.mp.detail.value)
      },
      changeIsDelayShipping(e){
        this.dataForm.isDelayShipping = parseInt(e.mp.detail.value)
      },
      async toSelect() {
        if (!this.dataForm.pushToServicer && this.dataForm.pushToServicer !== 0) {
          wx.showToast({
            title: '请选择是否推送服务老师',
            icon: 'none'
          })
          return false;
        }
        if (!this.dataForm.useDiscountAmount && this.dataForm.useDiscountAmount !== 0) {
          wx.showToast({
            title: '请选择是否享受折扣',
            icon: 'none'
          })
          return false;
        }
        if (!this.dataForm.isRebuy && this.dataForm.isRebuy !== 0) {
          wx.showToast({
            title: '请选择是否复购',
            icon: 'none'
          })
          return false;
        }
        if (!this.dataForm.isDelayShipping && this.dataForm.isDelayShipping !== 0) {
          wx.showToast({
            title: '请选择是否暂不发货',
            icon: 'none'
          })
          return false;
        }
        App.otherForm = this.dataForm;
        wx.navigateBack();
      }
    }
  }
</script>

<style lang="scss">
  @import "../../styles/base";

  .container {
    position: relative;

    .info-wrap {
      padding-left: pxToRem(40);
      padding-right: pxToRem(40);
      .info-item {
        position: relative;
        border-bottom: pxToRem(1) solid #44BDF5;
        min-height: pxToRem(112);
        .info-name {
          @include middle-center-y();
          left: 0;
          font-size: pxToRem(28);
        }
        input, .radio-group {
          padding: pxToRem(30) pxToRem(30) pxToRem(30) pxToRem(300);
          font-size: pxToRem(28);
          line-height: pxToRem(40);
          &::-webkit-input-placeholder {
            color: #9B9B9B;
          }
          &.select {
            color: #4a4a4a;
          }
        }
        .radio {
          margin-right: pxToRem(50);
          font-size: pxToRem(28);
          .label {
            margin-left: pxToRem(5);
            font-size: pxToRem(28);
          }
        }
        image {
          @include middle-center-y();
          right: 0;
          width: pxToRem(14);
          height: pxToRem(26);
        }
      }
    }

    .btn {
      @include middle-center-x(fixed);
      bottom: pxToRem(120);
      width: pxToRem(518);
      height: pxToRem(98);
      line-height: pxToRem(98);
      text-align: center;
      background: linear-gradient(180deg, rgba(121, 224, 251, 1) 0%, rgba(68, 189, 245, 1) 100%);
      border-radius: pxToRem(20);
      font-size: pxToRem(36);
      color: #fff;
    }
  }

  .line-list {
    display: flex;
    align-items: center;
    .line {
      margin-right: pxToRem(10);
      width: pxToRem(16);
      height: pxToRem(10);
      background-color: #C86B6D;
      transform: skew(-45deg);
      &:nth-child(2n) {
        background-color: #509BC4;
      }
    }
  }
</style>
